<template>
	<view >
		<view style="height:10px;"></view>
		<view v-for="(item,index) in starList" :key="item.groupName"  @click="openList(item)" >
			<view class="group" >
				<text style="font-size:30rpx;color:#aaaaaa; padding-left:20px;">{{item.groupName}}</text>
				<view style="height: 1px;width:100%;background-color: #999997;margin-top: 9px;"/>
			</view>
			<scroll-view  v-if="item.isShowList">
				<view class="listItem">
					<view class="star-list">
						<view 
							v-for="(items, index) in item.childer" :key="indexs"
							class="star-item"
							@click="navToDetailPage(item)">
							<view class="image-wrapper">
								<image :src="items.image" mode="aspectFill" ></image>
							</view>
							<view class="price-box">
								<text class="title clamp">{{items.name}}</text>
								<text class="time">{{items.time}}</text>
								<text class="time">{{items.place}}</text>
								<view class="tag">
									<button>{{items.tag1}}</button>
									<button>{{items.tag1}}</button>
								</view>
								<view class="staritem"><view class="star">star</view></view>
							</view>
						</view>
					</view>	
				</view>		
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				starList:[
					{
					id: 1,
					groupName: "与画",
					flag:1,
					isShowList:false,
					childer: [{
						id: 11,
						name: "山海心经|天地天地天地",
						place: "杭州 下沙浙江工商",
						time: "2020-05-29-2020.8.9",
						image:"../../static/yyt.jpg",
						tag1:"绘画展",
						tag2:"绘展",
						tag3:"画展"
						},
						
							{
							id: 13,
							name: "山海心经|天地天地天地",
							place: "杭州 下沙浙江工商",
							time: "2020-05-29-2020.8.9",
							image:"../../static/yyt.jpg",
							tag1:"绘画展",
							tag2:"绘展",
							tag3:"画展"
							}]
					},
					{
					id: 2,
					groupName: "帖子",
					isShowList:false,
					childer: [{
						id: 21,
						name: "山海心经|天地天地天地",
						place: "杭州 下沙浙江工商",
						time: "2020-05-29-2020.8.9",
						image:"../../static/yyt.jpg",
						tag1:"绘画展",
						tag2:"绘展",
						tag3:"画展"
						}, {
						id: 22,
						name: "山海心经|天地天地天地",
						place: "杭州 下沙浙江工商",
						time: "2020-05-29-2020.8.9",
						image:"../../static/yyt.jpg",
						tag1:"绘画展",
						tag2:"绘展",
						tag3:"画展"
						}]
					}]
				
				
			}
		},
		methods: {
			openList:function(item){
				item.isShowList=!item.isShowList
			}
		}
	}
</script>

<style lang="scss">
	page{
	background-color: #ffffff;
	}
	.content{
		padding-top: 96upx;
	}
	
	.group{
		display: inline-flex;
		flex-direction: column;
		/* padding-left:20px; */
		padding-top: 10px;
		height:40px;
		width:100%;		
		/* text-align: center; */
		background-color: #ffffff;
	}
	.listItem{
		margin-left:10px;
		margin-right: 10px;
	}
	
	.star-list{
		display:flex;
		flex-wrap:wrap;
		padding: 0 20upx;
		margin-bottom: 0px;
		background: #ffffff;
		margin-top: 10px;
		
		.star-item{
			display:flex;
			flex-direction: row;
			width: 100%;
			padding-bottom: 30upx;
			
			padding-left: 10px;
			border-radius: 10px;
			margin-bottom: 10px;
			border: 2upx solid  #aaaaaa;
			/* &:nth-child(2n+1){
				margin-right: 4%;
				
			} */
		}
		.image-wrapper{
			width: 90px;
			height: 130px;
			border-radius: 13px;
			margin-top: 10px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.price-box{
			display: flex;
			flex-direction: column;
			padding-left: 30upx;
			padding-top:10px;
			font-size: 24upx;
			color: $font-color-light;
		}
		.title{
			font-size: 17px;
			color: $font-color-dark;
			line-height: 80upx;
			font-weight:800;
		}
		
		.time{
			font-size: 12px;
			color: #7b7d81;
			line-height: 1;
			padding-bottom:2px;
			&:before{
				font-size: 26upx;
			}
		}
		.tag{
			display:flex;
			flex-direction: row;
			margin-top: 10px;
			button{
				width:50px;
				height:20px;
				line-height: 17px;
				justify-content: center;
				padding: 0px;
				margin:0px;
				margin-right: 4px;
				font-size:3px;
				color: #5500ff;
				background-color: rgba(0,0,0,0);
				border-radius: 5px;
				&:after {
				    border-color:#5500ff; 
					border-width: 1px;
					}   
			}
		}

		
	}
		
	.staritem{
		position:relative;
	}
	.star{
		position:absolute;
		right:10rpx;
	}

	
	
	
	
	
	
</style>
